import defaultSettings from '@/settings'
import Cookies from 'js-cookie'
const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
const THEME_COLOR_KEY = 'theme-color'
// 默认的主题色（蓝色）
const THEME_DEFAULT_COLOR = '#3d6df8'
const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  sidebarLogo: sidebarLogo,
  // 默认的主题色
  theme: Cookies.get(THEME_COLOR_KEY) || THEME_DEFAULT_COLOR
}
const mutations = {
  CHANGE_SETTING: (state, { key, value }) => {
    // eslint-disable-next-line no-prototype-builtins
    if (state.hasOwnProperty(key)) {
      // 把新值同步到vuex中
      state[key] = value
    }
    // 如果 key 是 theme，表明要给主题色赋值
    if (key === 'theme') {
      // 把这个值同步一份到cookie中
      Cookies.set(THEME_COLOR_KEY, value)
    }
  },
  // 重置主题色
  resetTheme (state) {
    // 1. vuex中的theme设置为默认值
    state.theme = THEME_DEFAULT_COLOR
    // 2. 删除 cookie 中的 theme
    Cookies.remove(THEME_COLOR_KEY)
  }
}

const actions = {
  changeSetting ({ commit }, data) {
    commit('CHANGE_SETTING', data)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

